﻿
<html ng-app="todoApp">
<head>
    <meta charset="utf-8">
    <title>Angular.js Example</title>
    <link href="Content/popscript.css" rel="stylesheet" />
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <script src="Scripts/jquery-2.1.1.min.js"></script>
    <script src="Scripts/jquery.blockUI.min.js"></script>
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/angular-route.min.js"></script>
    <script src="Scripts/angular-resource.min.js"></script>
    <script src="Scripts/angular-animate.min.js"></script>
    <script src="Scripts/angular-messages.js"></script>
    <script src="Scripts/popscript.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
    <script src="Scripts/app/config.js"></script>
    <script src="Scripts/app/services.js"></script>
    <script src="Scripts/app/controllers.js"></script>
    <script src="Scripts/app/filters.js"></script>
    <link href="Content/custom.css" rel="stylesheet" />
    
    <script language="javascript" type="text/javascript">

        $(document).ready(function() {
            $("a").tooltip();
        });

    </script>

</head>

<body>

    <!-- Main form for managing the Todos -->
    <div class="panel panel-default" style="width: auto" ng-controller="TodoController">
        <div class="panel-heading">
            <h1>World's Greatest Todos in Angular</h1>
        </div>
        <br />

        <div class="container">
            <form name="TodosForm" class="form-horizontal">
                <!--This class important to make it look like a form-->
                <div class="form-group">
                    <label for="todoid" class="col-lg-2 control-label">Id:</label>
                    <div class="col-lg-2">
                        <input type="text" class="form-control" id="todoid" ng-model="Todo.TodoId" disabled />
                    </div>
                </div>

                <div class="form-group">
                    <label for="description" class="col-lg-2 control-label">Description:</label>
                    <div class="col-lg-6">
                        <input type="text" name="description" required ng-minlength="2"
                               ng-maxlength="100" ng-model="Todo.Description" class="form-control"
                               placeholder="Description..." />
                    </div>
                    
                    <!--Includes all the messages to an external file for re-use-->
                    <div ng-messages="TodosForm.description.$error" ng-messages-include="AngularMessages.html"
                         ng-show="!TodosForm.description.$pristine && !TodosForm.$valid">
                    </div>
                    
                </div>

                <div class="form-group">
                    <label for="completed" class="col-lg-2 control-label">Completed:</label>
                    <div class="col-lg-10">
                        <input type="checkbox" id="completed" ng-model="Todo.Completed" ng-init="Todo.Completed=false" />
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-lg-12">
                        <button class="btn-success btn-sm" type="button" id="save" value="Save"
                                ng-click="saveTodo(Todo)" ng-disabled="Todo.Description == null">
                            <span class="glyphicon glyphicon-floppy-disk"></span> Save
                        </button>

                        <button class="btn-primary btn-sm" type="button" id="clear" value="Clear"
                                ng-disabled="Todo.Description == null" ng-click="clearTodo()">
                            <span class="glyphicon glyphicon-refresh"></span> Clear
                        </button>
                        <button class="btn-warning btn-sm" type="button" id="delete" value="Delete"
                                ng-click="deleteTodo(Todo.TodoId)" ng-disabled="Todo.TodoId == null">
                            <span class="glyphicon glyphicon-trash"></span> Delete
                        </button>
                    </div>
                </div>

            </form>

        </div>

        <!-- show the spinner in start up 
            <div id="spinner" ng-show="isLoading">
            </div>
            -->

        <div id="spinner" style="display: none">
            <!--hiding spinner once data is loaded-->
        </div>

        <!-- Todo Details -->
        <div class="panel panel-default" ng-show="TodoCount > 0">
            
            <div class="panel panel-success">
                <div class="input-group input-group-sm col-sm-8">
                    <!-- show total completed and total not completed-->
                    <input type="text" class="col-sm-4" placeholder="Filter Todos..." ng-model="filterTodo">
                    <a href="" ng-click="filterByCompleted(true)" rel="tooltip" data-placement="right" title="Show Completed Todos">
                        <span class="glyphicon glyphicon-check col-sm-1"> {{totalCompleted}} </span>
                    </a>
                    <a href="" ng-click="filterByCompleted(false)" rel="tooltip" data-placement="right" title="Show Un-completed Todos">
                        <span class="glyphicon glyphicon-unchecked col-sm-1"> {{totalNotCompleted}} </span>
                    </a>
                    <a href="" ng-click="filterByAll()" rel="tooltip" data-placement="right" title="Show All Todos">
                        <span class="glyphicon glyphicon-asterisk col-sm-2"> {{totalTodos}} </span>
                    </a>
                </div>
            </div>

            <table class="table table-condensed table-striped">
                <thead>
                    <tr>
                        <th class="col-sm-1">Id</th>
                        <th class="col-sm-3">Todo</th>
                        <th class="col-sm-1">Done</th>
                        <th class="col-sm-2">Edit</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="slide-animation" ng-repeat="Todo in Todos | orderBy:'TodoId' | filter: filterTodo | TodoCustomFilter : filterOptions | startFrom:currentPage*pageSize | limitTo:pageSize">
                        <td class="col-sm-1">{{Todo.TodoId}}</td>
                        <td class="col-sm-3">{{Todo.Description}}</td>
                        <td class="col-sm-1">
                            <!--Show the tick or untick icon conditionally...-->
                            <span class="glyphicon glyphicon-check" ng-show="{{Todo.Completed}}==true"></span>
                            <span class="glyphicon glyphicon-unchecked" ng-show="{{Todo.Completed}}==false"></span>
                        </td>
                        <td class="col-sm-2">
                            <a href="" ng-click="selectTodo(Todo)" rel="tooltip" title="Select the record for updating or deletion">
                                <span class="glyphicon glyphicon-pencil"></span>
                            </a>
                        </td>
                    </tr>
                    
                </tbody>
                
            </table>
            
            <div>
                <button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1" class="btn-info">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </button>
                {{currentPage+1}}/{{numberOfPages()}}
                <button ng-disabled="currentPage >= Todos.length/pageSize - 1" ng-click="currentPage=currentPage+1" class="btn-info">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </button>
            </div>
        </div>

    </div>

</body>
</html>